<%@page language="java" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>
<!DOCTYPE html>
<head>
    <base href="<%=basePath %>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css"
          href="static/util/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="static/util/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css"
          href="static/util/css/loaders.min.css"/>
    <title>用户登陆</title>
    <script type="text/javascript" src="static/js/jquery1-11-3.min.js"></script>
    <style type="text/css">
        /**
                *这些样式用于调整动态图标的位置和样式
                **/
        #loader > div {
            background-color: #494949;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row" style="margin-top:100px;">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" style="color:cadetblue;font-size:20px;">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;用户登陆
                    </h3>
                </div>
                <div class="panel-body">

                    <div class="row" style="min-height:50px;margin-top:30px;">
                        <label for="userNamelab" class="col-sm-2 control-label" id="userNamelab"
                               style="color:#99CC99;font-size:18px">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userName" value="admin1"
                                   placeholder="ID/手机号/邮箱" required="required" maxlength="36"/>
                        </div>
                    </div>
                    <div class="row" style="min-height:50px;">
                        <label for="passwordlab" class="col-sm-2 control-label" id="passwordlab"
                               style="color:#99CC99;font-size:18px">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="password" value="admin1"
                                   placeholder="密码" maxlength="18" required="required"/>
                        </div>
                        <div class="col-sm-2">
                            <a href="userspage/Security/find_complaint.jsp" tabIndex="-1"
                               style="font-size: 12px;margin-top: 15px;display:block;float: right;">忘记密码？</a>
                        </div>
                    </div>
                    <div class="row" style="min-height:50px;">
                        <label for="vercodepiclab" class="col-sm-2 control-label" id="vercodepiclab"
                               style="color:#99CC99;font-size:18px">验证码</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="verCode"
                                   placeholder="验证码" maxlength="4" required="required"/>
                        </div>
                        <div class="col-sm-5">
                            <img id="varcodeimg" alt='点击切换图片' title='点击切换图片'
                                 style='width:85px;height:25px' border='0'
                                 onclick="changeVercode('#varcodeimg','#modelMessage')"
                                 src="vercode/vercodeQQ"/>
                            <a href="javascript:changeVercode('#varcodeimg','#modelMessage')"
                                style="margin-left: 10px;font-size: 12px;">换一下</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                        </div>
                        <div id="modelMessage" class="col-sm-6" style="color:red;text-align: center;">
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                    <div class="row" style="margin-top: 40px;">
                        <div class="col-sm-3">
                        </div>
                        <div class="col-sm-6">
                            <a href="user/tencentLogin" target="_blank"><img style="width: 60px;"
                               src="static/images/QQLoginImg_white.png"/>
                            </a>
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;min-heightheight:50px;">
                        <div class="col-sm-3">
                        </div>
                        <div class="col-sm-6" id="loginDiv">
                            <button id="loginBtn" style="width:60%;margin-left: 50px;" onclick="loginSubmit()"
                                    class="btn btn-info">登陆
                            </button>
                        </div>
                        <div class="col-sm-3">
                            <a href="regist"
                               style="font-size: 12px;display:block;    line-height: 30px;">注册一个新账号!</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
<script type="text/javascript" about="">
    if(window.top!=window.self){//存在父页面
        parent.location.reload();
    }
</script>
<script type="text/javascript" src="static/js/base64.min.js"></script>
<script type="text/javascript" src="static/js/changevercode.js"></script>
<script type="text/javascript" src="static/js/backgroundimg.min.js"></script>
<script type="text/javascript">
    var successReturnPage = "";   //登录成功返回的页面
    $(function () {
        //按回车键提交表单
        $("body").keydown(function (event) {
            if (event.keyCode == "13") {//keyCode=13是回车键
                $('#loginBtn').click();
            }
        });
        //默认焦点输入用户名
        document.getElementById("userName").focus();
    });
    function loginSubmit() {
        $("#modelMessage").text("");
        var userName = $("#userName").val();
        var passWordMW = $("#password").val();
        var verCode = $("#verCode").val();
        var passWord = "";
        if (userName == "") {
            $("#modelMessage").text("用户名不能为空！");
            return;
        }
        if (userName.length < 6) {
            $("#modelMessage").text("用户名长度不能小于6！");
            return;
        }
        if (passWordMW == "") {
            $("#modelMessage").text("密码不能为空！");
            return;
        }
        if (passWordMW.length < 6) {
            $("#modelMessage").text("密码太短！");
            return;
        }
        if (verCode.length != 4) {
            $("#modelMessage").text("验证码不正确！");
            return;
        }
        try {
            passWord = encode64(passWordMW);  //进行加密
        } catch (e) {
            $("#modelMessage").text("发生未知错误！");
            return;
        }
        $("#loginDiv").html("<div id=\"loader\" style=\"margin-left: 100px;\" class=\"loader-inner ball-pulse\"><div></div><div></div><div></div></div>");
        loginAjax(userName, passWord, verCode);
    }
    function loginAjax(userName, passWord, verCode) {
        $.ajax({
            type: "post",
            url: "user/ajaxLogin",
            data: {
                "userName": userName,
                "passWord": passWord,
                "verCode": verCode
            },
            success: function (result) {
                var jsonobj = result;//eval("(" + result + ")");
                if (jsonobj.errNo != 0) {
                    $("#modelMessage").text(jsonobj.message);
                    $("#loginDiv").html("<button id=\"loginBtn\" "
                        + "style=\"width:60%;margin-left: 50px;\" onclick=\"loginSubmit()\" "
                        + "class=\"btn btn-info\">登陆</button>");
                    changeVercode('#varcodeimg'); //刷新验证码
                } else {
                    window.location.href = successReturnPage;
                }
            }
        });
    }
</script>
</html>